
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>The MathJax.OutputJax Class &mdash; MathJax v2.0 documentation</title>
    <link rel="stylesheet" href="../_static/mj.css" type="text/css" />
    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../',
        VERSION:     '2.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../_static/jquery.js"></script>
    <script type="text/javascript" src="../_static/underscore.js"></script>
    <script type="text/javascript" src="../_static/doctools.js"></script>
    <!--<script type="text/javascript" src="../../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
    <link rel="top" title="MathJax v2.0 documentation" href="../index.html" />
    <link rel="up" title="The MathJax API" href="index.html" />
    <link rel="next" title="The MathJax.ElementJax Class" href="elementjax.html" />
    <link rel="prev" title="The MathJax.InputJax Class" href="inputjax.html" /> 
  </head>
  <body>
    
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="elementjax.html" title="The MathJax.ElementJax Class"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="inputjax.html" title="The MathJax.InputJax Class"
             accesskey="P">previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" accesskey="U">The MathJax API</a> &raquo;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="the-mathjax-outputjax-class">
<span id="api-output-jax"></span><h1>The MathJax.OutputJax Class<a class="headerlink" href="#the-mathjax-outputjax-class" title="Permalink to this headline">¶</a></h1>
<p>Output jax are the components of MathJax that translate
mathematics from the MathJax internal format (an <cite>element jax</cite>)
to whatever output is required to represent the mathematics (e.g.,
MathML elements, or HTML-with-CSS that formats the mathematics on screen).</p>
<p>An output jax is stored as a pair of files in a subdirectory of the
the <tt class="docutils literal"><span class="pre">jax/output</span></tt> directory, with the subdirectory name being the
name of the output jax.  For example, the NativeMML output jax is
stored in <cite>jax/output/NativeMML</cite>.  The first file, <tt class="docutils literal"><span class="pre">config.js</span></tt>, is
loaded when MathJax is being loaded and configured, and is indicated
by listing the input jax directory in the <cite>jax</cite> array of the MathJax
configuration.  The <tt class="docutils literal"><span class="pre">config.js</span></tt> file creates a subclass of the
<cite>MathJax.OutputJax</cite> object for the new output jax and registers it
with MathJax, along with the MIME-type of the element jax that it can
process.</p>
<p>The main body of the output jax is stored in the second file, <tt class="docutils literal"><span class="pre">jax.js</span></tt>,
which is loaded when the output jax is first called on to translate
some mathematics.  This file augments the original output jax
subclass with the additional methods needed to produce the output.
MathJax calls the input jax&#8217;s <a class="reference internal" href="jax.html#Translate" title="Translate"><tt class="xref py py-meth docutils literal"><span class="pre">Translate()</span></tt></a> method when it needs
the output jax to translate an element jax to produce output.</p>
<p>The <cite>MathJax.OutputJax</cite> class is a subclass of the <a class="reference internal" href="jax.html#api-jax"><em>MathJax Jax</em></a> class, and inherits the properties and methods of that
class.  Those listed below are the additional or overridden ones from
that class.</p>
<div class="section" id="properties">
<h2>Properties<a class="headerlink" href="#properties" title="Permalink to this headline">¶</a></h2>
<dl class="describe">
<dt>
<tt class="descname">id</tt></dt>
<dd><p>The name of the jax.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">version</tt></dt>
<dd><p>The version number of the jax.</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">directory</tt></dt>
<dd><p>The directory where the jax files are stored (e.g., <tt class="docutils literal"><span class="pre">&quot;[MathJax]/jax/output/HTML-CSS&quot;</span></tt>);</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">fontDir</tt></dt>
<dd><p>The directory where the fonts are stored (e.g., <tt class="docutils literal"><span class="pre">&quot;[MathJax]/fonts&quot;</span></tt>)</p>
</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">imageDir</tt></dt>
<dd><p>The directory where MathJax images are found (e.g. <tt class="docutils literal"><span class="pre">&quot;[MathJax]/images&quot;</span></tt>)</p>
</dd></dl>

</div>
<div class="section" id="methods">
<h2>Methods<a class="headerlink" href="#methods" title="Permalink to this headline">¶</a></h2>
<dl class="method">
<dt id="preProcess">
<tt class="descname">preProcess</tt><big>(</big><em>state</em><big>)</big><a class="headerlink" href="#preProcess" title="Permalink to this definition">¶</a></dt>
<dd><p>This is called by <tt class="docutils literal"><span class="pre">MathJax.Hub</span></tt> to ask the output processor to
prepare to process math scripts.  Its default action is to start
loading the jax&#8217;s <tt class="docutils literal"><span class="pre">jax.js</span></tt> file, and redefine itself to simply
return the callback for the load operation (so that further calls
to it will cause the processing to wait for the callback).</p>
<p>Once the <tt class="docutils literal"><span class="pre">jax.js</span></tt> file has loaded, this method is replaced by
the jax&#8217;s <a class="reference internal" href="#preTranslate" title="preTranslate"><tt class="xref py py-meth docutils literal"><span class="pre">preTranslate()</span></tt></a> method, so that subsequent calls
to <a class="reference internal" href="#preProcess" title="preProcess"><tt class="xref py py-meth docutils literal"><span class="pre">preProcess()</span></tt></a> will perform the appropriate translation.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first">
<li><dl class="first docutils">
<dt><strong>state</strong> &#8212; a structure containing information about the</dt>
<dd><p class="first last">current proccessing state of the mathematics</p>
</dd>
</dl>
</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last"><tt class="docutils literal"><span class="pre">null</span></tt></p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt id="preTranslate">
<tt class="descname">preTranslate</tt><big>(</big><em>state</em><big>)</big><a class="headerlink" href="#preTranslate" title="Permalink to this definition">¶</a></dt>
<dd><p>This routine replaces <a class="reference internal" href="#preProcess" title="preProcess"><tt class="xref py py-meth docutils literal"><span class="pre">preProcess()</span></tt></a> above when the jax&#8217;s
<tt class="docutils literal"><span class="pre">jax.js</span></tt> file is loaded.  It is called by <tt class="docutils literal"><span class="pre">MathJax.Hub</span></tt> to ask
the output processor to prepare to process math scripts.  (For
example, the HTML-CSS output jax uses this to determine em-sizes
for all the mathematics at once, to minimize page reflows that
slow down Internet Explorer.)</p>
<p>The routine can use <tt class="docutils literal"><span class="pre">state.jax[this.id]</span></tt> to obtain the array of
element jax that are to be processed.  The output jax can use the
<tt class="docutils literal"><span class="pre">state</span></tt> variable to maintain its own state information, but
any properties that it adds to the variable should have a prefix
that is the output jax&#8217;s ID.  For example, the HTML-CSS output jax
might use <tt class="docutils literal"><span class="pre">state.HTMLCSSlast</span></tt> to keep track of the last equation
it processed, or could add <tt class="docutils literal"><span class="pre">state.HTMLCSS</span> <span class="pre">=</span> <span class="pre">{...}</span></tt> to create an
object of its own within the state variable.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first">
<li><dl class="first docutils">
<dt><strong>state</strong> &#8212; a structure containing information about the</dt>
<dd><p class="first last">current proccessing state of the mathematics</p>
</dd>
</dl>
</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last"><tt class="docutils literal"><span class="pre">null</span></tt></p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt>
<tt class="descname">Translate</tt><big>(</big><em>script</em>, <em>state</em><big>)</big></dt>
<dd><p>This is the main routine called by MathJax when an element jax is
to be converted to output.  The default <a class="reference internal" href="jax.html#Translate" title="Translate"><tt class="xref py py-meth docutils literal"><span class="pre">Translate()</span></tt></a>
method throws an error indicating that <a class="reference internal" href="jax.html#Translate" title="Translate"><tt class="xref py py-meth docutils literal"><span class="pre">Translate()</span></tt></a> hasn&#8217;t been
defined, so when the <tt class="docutils literal"><span class="pre">jax.js</span></tt> file loads, it should override the
default <a class="reference internal" href="jax.html#Translate" title="Translate"><tt class="xref py py-meth docutils literal"><span class="pre">Translate()</span></tt></a> with its own version that does the actual
translation.</p>
<p>You should use <tt class="docutils literal"><span class="pre">MathJax.Hub.getJaxFor(script)</span></tt> to obtain the
element jax for the given script.  The translation process may
modify the element jax (e.g., if it has data that needs to be
stored with the jax), and may insert DOM elements into the
document near the jax&#8217;s <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt> tag.  The output jax can use
the <tt class="docutils literal"><span class="pre">state</span></tt> variable to maintain information about its
processing state, but see <a class="reference internal" href="#preTranslate" title="preTranslate"><tt class="xref py py-meth docutils literal"><span class="pre">preTranslate()</span></tt></a> above for naming
conventions for properties that are added.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first">
<li><p class="first"><strong>script</strong>  &#8212; the <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt> element to be translated</p>
</li>
<li><dl class="first docutils">
<dt><strong>state</strong> &#8212; a structure containing information about the</dt>
<dd><p class="first last">current proccessing state of the mathematics</p>
</dd>
</dl>
</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last">the <cite>element jax</cite> resulting from the translation</p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt id="postTranslate">
<tt class="descname">postTranslate</tt><big>(</big><em>state</em><big>)</big><a class="headerlink" href="#postTranslate" title="Permalink to this definition">¶</a></dt>
<dd><p>This routines is called by <tt class="docutils literal"><span class="pre">MathJax.Hub</span></tt> when the translation
of math elements is complete, and can be used by the output
processor to finalize any actions that it needs to complete.
(For example, making the mathematics visible, or forcing a reflow
of the page.)</p>
<p>The routine can use <tt class="docutils literal"><span class="pre">state.jax[this.id]</span></tt> to obtain the array of
element jax that were processed, or can use the <tt class="docutils literal"><span class="pre">state</span></tt> variable
to store its own state information (see <a class="reference internal" href="#preProcess" title="preProcess"><tt class="xref py py-meth docutils literal"><span class="pre">preProcess()</span></tt></a>
above for caveats about naming properties).</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first">
<li><dl class="first docutils">
<dt><strong>state</strong> &#8212; a structure containing information about the</dt>
<dd><p class="first last">current proccessing state of the mathematics</p>
</dd>
</dl>
</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last"><tt class="docutils literal"><span class="pre">null</span></tt></p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt>
<tt class="descname">Register</tt><big>(</big><em>mimetype</em><big>)</big></dt>
<dd><p>This registers the MIME-type for the element jax associated with
this output jax so that MathJax knows to call this jax when it
wants to display an element jax of that type.  Several output jax
may register for the same input jax, in which case the first one
to register will be the default one for that type.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first simple">
<li><strong>mimetype</strong> &#8212; the MIME-type of the input this jax processes</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last"><tt class="docutils literal"><span class="pre">null</span></tt></p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt>
<tt class="descname">Remove</tt><big>(</big><em>jax</em><big>)</big></dt>
<dd><p>Removes the output associated with the given element jax.  The
routine can use <tt class="docutils literal"><span class="pre">jax.SourceElement()</span></tt> to locate the <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt>
tag associated with the element jax.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first simple">
<li><strong>jax</strong> &#8212; the element jax whose display should be removed</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last"><tt class="docutils literal"><span class="pre">null</span></tt></p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<p>If an output jax wants its output to handle the contextual menu item
and zooming, then it needs to tie into the event-handling code
(<cite>MathEvents</cite>) and the zoom-handling code (<cite>MathZoom</cite>).  That requires
the following methods.</p>
<dl class="method">
<dt id="getJaxFromMath">
<tt class="descname">getJaxFromMath</tt><big>(</big><em>math</em><big>)</big><a class="headerlink" href="#getJaxFromMath" title="Permalink to this definition">¶</a></dt>
<dd><p>This is called by the event-handling code (<cite>MathEvents</cite>) to get
the element jax associated with the DOM element that caused an
event to occur.  The output jax will have attached event handlers
to some DOM element that is part of its output, and the
<cite>MathEvents</cite> code uses this routine to map back to the jax
associated with that output.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first">
<li><dl class="first docutils">
<dt><strong>math</strong> &#8212; a DOM element that triggered a DOM event</dt>
<dd><p class="first last">(e.g., a mouse click)</p>
</dd>
</dl>
</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last">the <cite>ElementJax</cite> structure associated with the DOM element</p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

<dl class="method">
<dt id="Zoom">
<tt class="descname">Zoom</tt><big>(</big><em>jax</em>, <em>span</em>, <em>math</em>, <em>Mw</em>, <em>Mh</em><big>)</big><a class="headerlink" href="#Zoom" title="Permalink to this definition">¶</a></dt>
<dd><p>This routine is called by the zoom-handling code (<cite>MathZoom</cite>)
when an expression has received its zoom trigger event (e.g., a
double-click).  The <tt class="docutils literal"><span class="pre">jax</span></tt> is the math that needs to be zoomed,
<tt class="docutils literal"><span class="pre">span</span></tt> is a <tt class="docutils literal"><span class="pre">&lt;span&gt;</span></tt> element in which the zoomed version of
the math should be placed, <tt class="docutils literal"><span class="pre">math</span></tt> is the DOM element that
received the zoom trigger event, and <tt class="docutils literal"><span class="pre">Mw</span></tt> and <tt class="docutils literal"><span class="pre">Mh</span></tt> are the
maximum width and height allowed for the zoom box (the <tt class="docutils literal"><span class="pre">span</span></tt>).</p>
<p>The return value is an object with the following properties:</p>
<ul>
<li><dl class="first docutils">
<dt><tt class="docutils literal"><span class="pre">Y</span></tt> &#8212; the vertical offset from the top of the <tt class="docutils literal"><span class="pre">span</span></tt> to</dt>
<dd><p class="first last">the baseline of the mathematics</p>
</dd>
</dl>
</li>
<li><p class="first"><tt class="docutils literal"><span class="pre">mW</span></tt> &#8212; the width of the original mathematics element</p>
</li>
<li><p class="first"><tt class="docutils literal"><span class="pre">mH</span></tt> &#8212; the height of the original mathematics element</p>
</li>
<li><p class="first"><tt class="docutils literal"><span class="pre">zW</span></tt> &#8212; the width of the zoomed math</p>
</li>
<li><p class="first"><tt class="docutils literal"><span class="pre">zH</span></tt> &#8212; the height of the zoomed math</p>
</li>
</ul>
<p>All of these values are in pixels.</p>
<table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameters :</th><td class="field-body"><ul class="first simple">
<li><strong>jax</strong> &#8212; the jax to be zoomed</li>
<li><strong>span</strong> &#8212; the <tt class="docutils literal"><span class="pre">&lt;span&gt;</span></tt> in which to place the zoomed math</li>
<li><strong>math</strong> &#8212; the DOM element generating the zoom event</li>
<li><strong>Mw</strong> &#8212; the maximum width of the zoom box</li>
<li><strong>Mh</strong> &#8212; the maximum height of the zoom box</li>
</ul>
</td>
</tr>
<tr class="field"><th class="field-name">Returns :</th><td class="field-body"><p class="first last">a structure as described above</p>
</td>
</tr>
</tbody>
</table>
</dd></dl>

</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
  <h3><a href="../index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">The MathJax.OutputJax Class</a><ul>
<li><a class="reference internal" href="#properties">Properties</a></li>
<li><a class="reference internal" href="#methods">Methods</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="inputjax.html"
                        title="previous chapter">The MathJax.InputJax Class</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="elementjax.html"
                        title="next chapter">The MathJax.ElementJax Class</a></p>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="../search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="../genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="elementjax.html" title="The MathJax.ElementJax Class"
             >next</a> |</li>
        <li class="right" >
          <a href="inputjax.html" title="The MathJax.InputJax Class"
             >previous</a> |</li>
        <li><a href="../index.html">MathJax v2.0 documentation</a> &raquo;</li>
          <li><a href="index.html" >The MathJax API</a> &raquo;</li> 
      </ul>
    </div>
    <div class="footer">
        &copy; Copyright 2012 Design Science.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
    
  </body>
</html>